<template>
    <van-count-down :time="timeStamp">
        <template v-slot="timeData">
            <div class="timeout-card text-center">
                <div class="timeout-card-header">
                本次直播将于{{formatedDate.year}}年{{formatedDate.month}}月{{formatedDate.day}}日 {{formatedDate.hours}}:{{formatedDate.minutes}}开始
                </div>
                <div class="timeout-card-body">
                <p class="color-light-gray">直播倒计时</p>
                <div class="times">
                    <span>{{ timeData.days }}<i>天</i></span>
                    <span>{{ timeData.hours }}<i>时</i></span>
                    <span>{{ timeData.minutes }}<i>分</i></span>
                    <span>{{ timeData.seconds }}<i>秒</i></span>
                </div>
                <p><a href="#" class="color-blue" @click.prevent="showCodeDialog">点击此处，订阅开播提醒</a></p>
                </div>
            </div>
        </template>
    </van-count-down>

</template>

<script>
export default {
  components: {},
  props: ['dateTime', 'timeStamp'],
  data() {
    return {
    };
  },
  computed: {
    formatedDate(){
        let date = new Date(this.dateTime.replace(/-/g,'/'));
        let [year, month, day, hours, minutes, seconds] = [date.getFullYear(), date.getMonth() + 1, date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()]
       
        if(month < 10) month = `0${month}`;
        if(day < 10) day = `0${day}`;
        if(hours < 10) hours = `0${hours}`;
        if(minutes < 10) minutes = `0${minutes}`;
        if(seconds < 10) seconds = `0${seconds}`;

        return {year, month, day, hours, minutes, seconds}
    }
  },
  methods: {
    showCodeDialog(){
      this.$store.dispatch('setCodeDialogStatus', true)
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
@import '@/assets/config.scss';
.timeout-card {
  width: 660px;
  padding: 0 54px;
  margin: 28px auto;
  background-color: $color-white;
  border-radius: 12px;

  .timeout-card-header{
    height: 72px;
    border-bottom: 1px dashed #666;
    font-size: 24px;
    color: #333;
    line-height: 72px;
  }

  .timeout-card-body {
    padding: 20px 0;
    font-size: 24px;
    > p {
      line-height: 54px;
    }

  .times{ margin-bottom: 20px; }
    span{
      display: inline-block;
      width: 90px;
      height: 54px;
      margin-right: 10px;
      text-align: center;
      font-size: 32px;
      line-height: 54px;
      color: #fff;
      background-color: $blue;
      border-radius: 8px;
      
      &:last-child { margin-right: 0; }
      i {
        font-size: 24px;
      }
    }
  }
}
</style>